<%--
  Created by IntelliJ IDEA.
  User: Vadim
  Date: 7/3/14
  Time: 8:35 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Calendar</title>

    <link href='/content/style/style.css' rel='stylesheet' />

    <link href='../content/scripts/calendar/fullcalendar.css' rel='stylesheet' />
    <link href='../content/scripts/calendar/fullcalendar.print.css' rel='stylesheet' media='print' />
    <script src='../content/scripts/moment.min.js'></script>
    <script src='../content/scripts/jquery.min.js'></script>

<%--    <link rel='stylesheet' href='../content/scripts/calendar/cupertino/jquery-ui.min.css' />
    <script src='../content/scripts/jquery-ui.custom.min.js'></script>--%>

    <script src='../content/scripts/calendar/fullcalendar.min.js'></script>
    <script src='../content/scripts/calendar/lang-all.js'></script>

    <link href="../content/scripts/jquery-ui-1.11.0/jquery-ui.css" rel="stylesheet">
    <script src="../content/scripts/jquery-ui-1.11.0/jquery-ui.min.js"></script>

    <script src="../content/scripts/enclib.js"></script>

    <script>
        $(document).ready(function() {

            $('#calendar').fullCalendar({
                lang: 'ru',
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: false,
                timeFormat: 'H(:mm)',
                events: [
                    <c:forEach var="item" items="${events}" varStatus="loop">
                        {
                            id: '${item.id}',
                            title: '${item.title}',
                            start: '${item.event_start_date}',
                            end: '${item.event_end_date}',
                            color: '${item.color}'
                        }<c:if test="${!loop.last}">,</c:if>
                    </c:forEach>
                ],
                eventClick: function(event, jsEvent, view) {
                    console.log("id:" + event.id);

                    $.ajax({
                        type: "post",
                        url: '/publicpages/calendar_viewer.do',
                        data: {
                            event_id: event.id
                        },
                        success: function (result) {
                            if(result.error){
                                alert("errors:" + result.error);
                            } else {
                                console.log(result.description);

                                $("#dialog_text").html(utf8to16(base64decode(result.description)));

                                $( "#description_view_dialog" ).dialog( "option", "title", "Event: '" + event.title + "' description" );

                                $( "#description_view_dialog" ).dialog( "open" );
                            }
                        },
                        error: function (result) {
                            alert("error happen");
                        }
                    });

                }
            });

            $( "#description_view_dialog" ).dialog({
                autoOpen: false,
                width: 600,
                modal: true,
                buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
        });
    </script>

    <style>

        body {
            margin: 0;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            width: 900px;
            margin: 40px auto;
        }

    </style>

</head>
<body>
<div id="container">
    <div id="header">
        <jsp:include page="/publicpages/common/header.jsp"/>
    </div>
    <div id="body">
        <!-- ui-dialog -->
        <div id="description_view_dialog" title="Dialog Title">
            <div id="dialog_text"></div>
        </div>

        <div id='calendar'></div>
    </div>
    <div id="footer">
        <jsp:include page="/publicpages/common/footer.jsp"/>
    </div>
</div>
</body>
</html>
